import React, { useCallback, useRef, useState } from 'react';
import ZcbfForm from './ZcbfForm';
import ZcbfTreeList from './ZcbfTreeList';
import ZcbfMember from './ZcbfMember';
import './index.less';
import PubSub from 'pubsub-js'; // 组件互相通讯的插件
import { Tabs } from 'antd';

const ZcbfArea = () => {
  const [valueTransferData, setValueTransferData] = useState<any>([]);
  const listData = useRef<any>()
  const [valIndex, setValIndex] = useState<any>('2');
  
  PubSub.unsubscribe('projectInfo');
  PubSub.subscribe('projectInfo', (msg: any, data: any) => {
    if (data.msg === 'projectInfoData' && data.data) {
      setValueTransferData(data.data);
    } else if ('projectInfoDataDel') {
      setValueTransferData([]);
    }
  });

  const getSetTabs = useCallback((res: string) => {
    setValIndex(res)
  }, []);
  return (
    <div id='tabPanelZcbfArea'>
      <Tabs defaultActiveKey="2"
        onChange={(val: string) => { getSetTabs(val) }} activeKey={valIndex}>
        <Tabs.TabPane tab="项目基本信息" key="1">
          <ZcbfForm tableRow={valueTransferData} />
        </Tabs.TabPane>
        <Tabs.TabPane tab="组成部分" key="2">
          <ZcbfTreeList tableRow={valueTransferData} ref={listData} />
        </Tabs.TabPane>
        <Tabs.TabPane tab="项目成员" key="3">
          <ZcbfMember tableRow={valueTransferData} />
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default ZcbfArea;
